<template>
  <XenPageLayout title="访客中心" title-align="left">
    <view class="container">
      <!-- 顶部欢迎语 -->
      <view class="header">
        <text class="welcome-title">您好</text>
        <text class="welcome-subtitle">欢迎来到访客中心！</text>
      </view>

      <!-- 功能区域 -->
      <view class="menu-container">
        <view
          class="menu-item"
          hover-class="menu-item-hover"
          @click="handleVisitorAppointment"
        >
          <view class="icon-box">
            <i class="iconfont icon-fangkeyuyue"></i>
          </view>
          <text class="menu-text">访客预约</text>
        </view>

        <view
          class="menu-item"
          hover-class="menu-item-hover"
          @click="handleVisitorRecord"
        >
          <view class="icon-box">
            <i class="iconfont icon-a-fangkeyuyuejilu_huaban1"></i>
          </view>
          <text class="menu-text">预约记录</text>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script lang="ts" setup>
import XenPageLayout from "@/layouts/XenPageLayout.vue";
// 跳转选择事由页面
const handleVisitorAppointment = () => {
  uni.navigateTo({
    url: "/subpkg-visitor/visitor/sysvisitorreason/index",
  });
};
// 跳转预约记录页面
const handleVisitorRecord = () => {
  uni.navigateTo({
    url: "/subpkg-visitor/visitor/sysvisitorrecordrequestbill/index",
  });
};
</script>

<style scoped>
.container {
  padding: 40rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #f8f8f8, #ffffff);
}

.header {
  margin: 80rpx 20rpx 120rpx;
}

.welcome-title {
  font-size: 64rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
  letter-spacing: 2rpx;
}

.welcome-subtitle {
  font-size: 36rpx;
  color: #666;
  letter-spacing: 1rpx;
}

.menu-container {
  padding: 0 40rpx;
}

.menu-item {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.menu-item-hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

.icon-box {
  background: rgba(200, 125, 47, 0.08);
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  transition: all 0.3s ease;
}

.menu-item:active .icon-box {
  transform: scale(0.95);
}

.iconfont {
  font-size: 60rpx;
  color: #c87d2f;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  letter-spacing: 1rpx;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-item {
  animation: fadeIn 0.5s ease-out;
}

.menu-item:nth-child(2) {
  animation-delay: 0.1s;
}
</style>
